<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> ${serialNumber}、关注区域分布概况 </div>
<div id="focus-area-city-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 截至目前，关注区域总数共x个，其中关注景区有x个，关注的交通枢纽有x个，未分类的其他区域共x个，下图所示为关注区域在海南省内各市县分布情况。-->
</div>
<div id="map" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>

<script>
    (function () {

        $(document).ready(function () {
            // 一、关注区域分布概况
            var mapData = [
                { pubArea: "海口", pubCount: 6 },
                { pubArea: "白沙", pubCount: 565 },
                { pubArea: "陵水", pubCount: 44 },
            ];
            var labelArr = $.map(mapData, function(n, i){ return n.pubArea });
            var countArr = $.map(mapData, function(n, i){ return n.pubCount });
            var outdata = $.map(mapData, function(n, i){
                return {
                    name: n.pubArea,
                    value: n.pubCount
                }
            });
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;" +
                                params.value +
                                "&nbsp;&nbsp;"
                            );
                        } else {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;"
                            );
                        }
                    },
                },
                visualMap: {
                    type: 'piecewise',
                    min: 0,
                    max: 1000,
                    left: 20,
                    bottom: 0,
                    showLabel: !0,
                    padding: [15, 10],
                    backgroundColor: "transparent", //标题背景色
                    borderColor: "#01698C", //边框颜色
                    color: "#01698C",
                    textStyle: {
                        color: "#000"
                    },
                    borderWidth: 1,
                    pieces: [
                        {
                            gt: 20,
                            label: "20以上",
                            color: "#FF1B00"
                        },
                        {
                            gte: 10,
                            lte: 20,
                            label: "10 - 20",
                            color: "#DE6B00"
                        },
                        {
                            gte: 1,
                            lt: 10,
                            label: "1 - 10",
                            color: "#F1CE2A"
                        },
                        {
                            value: 0,
                            color: "rgba(1,63,77, 0.3)"
                        }
                    ],
                    show: !0
                },
                geo: {
                    map: "hainan",
                    roam: !1,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1.2,
                    label: {
                        show: true,
                        color: "#fff",
                        fontSize: 12
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#22A3BE",
                            areaColor: "rgba(1,89,98, 0.2)",
                            borderWidth: 1,
                            shadowBlur: 0.01,
                            shadowColor: "rgba(63, 218, 255, 1)"
                        },
                        emphasis: {
                            areaColor: "rgba(243, 131, 75, 0.8)",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0,
                            shadowBlur: 20,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        }
                    },
                },
                series: [
                    {
                        type: "map",
                        map: "hainan",
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return "{name|" + para.name + "}";
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: "#333333",
                                        align: "center",
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: "#333333",
                                        align: "center",
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: "#333333",
                                show: true,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#D9EEFF",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: "#FFAE00",
                            },
                        },
                        data: ${focusAreaCityCountMap},
                        nameMap: {
                            海口: "海口市",
                            三亚: "三亚市",
                            儋州: "儋州市",
                            五指山: "五指山市",
                            琼海: "琼海市",
                            文昌: "文昌市",
                            万宁: "万宁市",
                            东方: "东方市",
                            定安: "定安县",
                            屯昌: "屯昌县",
                            澄迈: "澄迈县",
                            临高: "临高县",
                            白沙: "白沙黎族自治县",
                            昌江: "昌江黎族自治县",
                            乐东: "乐东黎族自治县",
                            陵水: "陵水黎族自治县",
                            保亭: "保亭黎族苗族自治县",
                            琼中: "琼中黎族苗族自治县",
                            南海诸岛: "三沙市"
                        },
                    },
                ],
            };
            var echartsMap = echarts.init(document.getElementById("map"));
            echarts.registerMap("hainan", hainan);
            echartsMap.setOption(option);
            $("#focus-area-city-desc").text("${focusAreaCityCountMapDesc}");
        })
    })()
</script>